import {
    useState //私有状态
} from 'react'



const TodoForm =({onAddTodo})=>{
    // props 参数数据 state 私有数据
    // 单向数据流 
    const [text,setText] = useState('')
    const handleSubmit =(e)=>{
        e.preventDefault() //阻止默认行为
        let res = text.trim()
        if(!res)return;
        onAddTodo(res)
        setText('');//清空输入框 对数据状态和界面状态要敏感
    }
    return(
        //JSX 一定得有唯一的最外层元素
        <>
            <h1 className='header'>TodoLists</h1>
            <form className='todo-input' onSubmit={handleSubmit}>
                <input type="text"
                    value={text}
                    onChange={e => setText(e.target.value)}
                    required
                    placeholder='Todo text'
                />
                <button type="submit">Add</button>
            </form>
        </>
    )
}
export default TodoForm